<template>
    <van-nav-bar title="影院" />
    <van-tabs v-model:active="active">
        <van-tab title="全城"> 
            <!-- <van-card v-for="i in data" price="44起" desc="上海市北京东路780号(进贵州路)"
                title="上海黄埔剧场" /> -->
                <div class="card" v-for="i in data">
                    <p class="aa">
                        <p>{{ i.title }}</p>
                        <p class="xiao">{{ i.desc }}</p>
                    </p>
                    <span>{{ i.price }}</span>
                </div>
            </van-tab>
        <van-tab title="APP订票">内容 2</van-tab>
        <van-tab title="最近去过">内容 3</van-tab>
    </van-tabs>
    <div class="db">
        <van-tabbar v-model="active">
            <van-tabbar-item icon="home-o">标签</van-tabbar-item>
            <van-tabbar-item icon="search">标签</van-tabbar-item>
            <van-tabbar-item icon="friends-o">标签</van-tabbar-item>

        </van-tabbar>
    </div>
</template>

<script setup>
import { ref } from 'vue'
let data = ref([
    { price: '44', desc: '上海市北京东路780号(进贵州路)', title: '上海黄埔剧场' },
    { price: '65', desc: '胜利影院', title: '虹口区乍浦路408一层' },
    { price: '84', desc: '大悦城新恒星影城', title: '上海市蓝北区西藏北路166大楼' },
    { price: '39.9', desc: '帕加尼激光电影院', title: '虹口区私闯安检设备三楼' },
    { price: '45', desc: '帕加尼激光电影院', title: '虹口区私闯安检设备三楼' },
    { price: '56', desc: '上课就不舍为得', title: '上的讲话v为首的电视服务' },
    { price: '39.9', desc: '水分无法', title: '是否俄方微风是' },
    { price: '65', desc: '胜利影院', title: '虹口区乍浦路408一层' },
    { price: '84', desc: '大悦城新恒星影城', title: '上海市蓝北区西藏北路166大楼' },
    { price: '39.9', desc: '帕加尼激光电影院', title: '虹口区私闯安检设备三楼' },

])

const active = ref(0);
</script>

<style>
.van-tabbar {
    display: flex;
    width: 100%;
    height: 50px;
}

.db {
    width: 100%;
    height: 50px;
}
.card{
    width: 100%;
    height: 80px;
}
.aa{
    float: left;
    width: 70%;
}
.card span{
   
    color: #ff5f16;

}
.xiao{
    font-size: 11px;
}
</style>